<!--
 * 体态特征
 * @Author: John Trump
 * @Date: 2020-07-15 15:37:05
 * @LastEditors: John Trump
 * @LastEditTime: 2020-07-15 16:24:37
 * @FilePath: /src/views/body/index.vue
-->

<template>
  <div>
    <Robot :robotsay="Rsay"></Robot>
    <div class="wrapper main">
      <div class="cards">
        <mu-row gutter>
          <mu-col span="4">
            <div class="card">
              <div class="top">
                <h1>
                  <img src="../../assets/images/icon_body_1.png" />
                  BMI
                </h1>
                <div class="badge">正常</div>
              </div>
              <div class="bottom">
                <div class="data">23.4</div>
                <div class="unit">&nbsp;</div>
              </div>
            </div>
          </mu-col>
          <mu-col span="4">
            <div class="card">
              <div class="top">
                <h1>
                  <img src="../../assets/images/icon_body_2.png" />
                  体重
                </h1>
                <div class="badge">正常</div>
              </div>
              <div class="bottom">
                <div class="data">78.9</div>
                <div class="unit">kg</div>
              </div>
            </div>
          </mu-col>
          <mu-col span="4">
            <div class="card">
              <div class="top">
                <h1>
                  <img src="../../assets/images/icon_body_3.png" />
                  体温
                </h1>
                <div class="badge lower">偏低</div>
              </div>
              <div class="bottom">
                <div class="data">26.9</div>
                <div class="unit">℃</div>
              </div>
            </div>
          </mu-col>
        </mu-row>
        <mu-row gutter>
          <mu-col span="4">
            <div class="card">
              <div class="top">
                <h1>
                  <img src="../../assets/images/icon_body_4.png" />
                  血压
                </h1>
                <div class="badge higher">偏高</div>
              </div>
              <div class="bottom">
                <div class="data">130/78</div>
                <div class="unit">mmH</div>
              </div>
            </div>
          </mu-col>
          <mu-col span="4">
            <div class="card">
              <div class="top">
                <h1>
                  <img src="../../assets/images/icon_body_5.png" />
                  血糖
                </h1>
                <div class="badge lower">偏低</div>
              </div>
              <div class="bottom">
                <div class="data">3.4</div>
                <div class="unit">毫摩尔/升</div>
              </div>
            </div>
          </mu-col>
          <mu-col span="4">
            <div class="card">
              <div class="top">
                <h1>
                  <img src="../../assets/images/icon_body_6.png" />
                  平均心率
                </h1>
                <div class="badge lower">偏低</div>
              </div>
              <div class="bottom">
                <div class="data">23.4</div>
                <div class="unit">次/分</div>
              </div>
            </div>
          </mu-col>
        </mu-row>
      </div>
    </div>
    <BasicLayout></BasicLayout>
  </div>
</template>

<script>
import Robot from "../../components/Robot";
import BasicLayout from "../../components/BasicLayout";
export default {
  name: "BodyView",
    data() {
    return {
      Rsay:'您的身体非常健康噢，请继续保持。'
    };
  },
  components: {
    Robot,
    BasicLayout
  }
};
</script>

<style lang="less" scoped>
@normal: #33cb98;
@higher: #f36271;
@lower: #05b7f7;

.main{
  width: 92%;
}
.wrapper {
  padding: 40px 50px;
}

.col {
  padding: 20px 25px;
}

.cards {
  .card {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 30px 0px rgba(18, 70, 53, 0.08);
    border-radius: 40px;
    padding: 30px;
    .top {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 45px;
      /* 标题 */
      h1 {
        margin: 0;
        font-size: 50px;
        font-weight: bold;
        color: rgba(0, 0, 0, 1);
        line-height: 60px;
        display: flex;
        align-items: center;
        img {
          width: 40px;
          height: 40px;
          margin-right: 20px;
        }
      }
      /* 正常 #33CB98 / 偏低 #05B7F7 / 偏高 #F36271 */
      .badge {
        background: rgba(51, 203, 152, 0);
        border-radius: 20px;
        padding: 6px 21px;
        font-size: 28px;
        font-weight: bold;
        border: 3px solid @normal;
        color: @normal;
        &.lower {
          border: 3px solid @lower;
          color: @lower;
        }
        &.higher {
          border: 3px solid @higher;
          color: @higher;
        }
      }
    }
    .bottom {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      font-weight: bold;
      line-height: 60px;

      .data {
        color: @normal;
        font-size: 60px;
      }
      .unit {
        font-size: 34px;
      }
    }
  }
}
</style>
